<template>
	<div class="leftone1">
		<!--<p>治超设备</p>-->
		<div class="lanediv">
			<ul>
				<li style="margin-top: 8px;">
					<a  style="width: 25%;">&nbsp;</a>
					<a style="width: 30%;">接入车道数</a>
					<a style="width: 20%;">在线率</a>
				</li>
				<li v-for="list in lanelist">
					<a style="width: 25%;margin-left: 5%;text-align: left;">{{list.tunnelname}} </a>
					<a style="width: 20%;">{{list.number}}车道</a>
					<a style="width: 25%;margin-top: 2%;margin-left: 4%;">
						<el-progress :color="customColorMethod" :show-text="false" :stroke-width="10" :percentage=list.lanepercent></el-progress>
					</a>
					<a style="width: 10%;">{{list.lanepercent}}%</a>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				customColor: '#00a6ff',
				lanelist:  [{
						tunnelname: "成都收费站",
						number: 8,
						lanepercent: 60
					},
					{
						tunnelname: "龙泉驿收费站",
						number: 8,
						lanepercent: 70
					},
					{
						tunnelname: "洛带收费站",
						number: 8,
						lanepercent: 20
					},
					{
						tunnelname: "羊马收费站",
						number: 8,
						lanepercent: 40
					},
					{
						tunnelname: "简阳收费站",
						number: 8,
						lanepercent: 60
					},
					{
						tunnelname: "禾丰收费站",
						number: 8,
						lanepercent: 70
					},
					{
						tunnelname: "高寿收费站",
						number: 8,
						lanepercent: 30
					},
					{
						tunnelname: "乐至收费站",
						number: 8,
						lanepercent: 60
					},
					{
						tunnelname: "石湍收费站",
						number: 8,
						lanepercent: 80
					},
					{
						tunnelname: "安岳收费站",
						number: 8,
						lanepercent: 30
					},
					{
						tunnelname: "兴隆收费站",
						number: 8,
						lanepercent: 90
					},
					{
						tunnelname: "李家收费站",
						number: 8,
						lanepercent: 60
					},
					{
						tunnelname: "四川收费站",
						number: 8,
						lanepercent: 50
					},
					{
						tunnelname: "朝阳收费站",
						number: 8,
						lanepercent: 80
					}
				]
			};
		},
		computed: {},
		watch: {},
		mounted() {
			console.log(this.lanelist);
		},
		methods: {}
	};
</script>
<style lang='scss'>
	.el-progress-bar__outer{
		background-color: #00082F;
	}
	.leftone1 {
		width: 100%;
		height: 100%;
	
		p {
			color: #FFFFFF;
			
			margin: 0;
			padding: 0;
			margin-left: 30px;
			margin-top: 10px;
		}
		.lanediv {
			width: 100%;
			height: 95%;
			
			ul {
				margin: 0;
				padding: 0;
				li {
					float: left;
					width: 100%;
					color: #FFFFFF;
					text-decoration: none;
					list-style: none;
					line-height: 30px;
					a {
						font-size: 14px;
						display: block;
						float: left;
						text-align: center;
					}
				}
			}
		}
	}
</style>